          <style type="text/css">
            .col-pessoa_id {
              display: none;
            }
          </style>
          <?php echo $this->Session->flash(); ?>
          <div class="row">
            <div class="span9">
              <form id="frmFiltro" action="" method="post"></form>
              <table id="tbl-veiculos" class="tabela">
                <thead>
                  <tr>
                    <th class="col-id"><?php echo $this->Paginator->sort('id', '#', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                    <th><?php echo $this->Paginator->sort('descricao', 'Descrição', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                    <th><?php echo $this->Paginator->sort('placa', 'Placa', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                    <th><?php echo $this->Paginator->sort('ano', 'Ano', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                    <th><?php echo $this->Paginator->sort('capacidade', 'Capacidade', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                    <th><?php echo $this->Paginator->sort('cor', 'Cor', array('url' => array('controller' => '#veiculos', 'action' => 'index'))); ?></th>
                  </tr>
                  <tr class="row-filters">
                    <td class="col-id"></td>
                    <td class="col-pessoa_id"></td>
                    <td><input id="filtroDescricao" name="filtroDescricao" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroPlaca" name="filtroPlaca" class="inputFiltro" type="text" form="frmFiltro"></td>
                    <td><input id="filtroAno" name="filtroAno" class="inputFiltro" type="number" form="frmFiltro"></td>
                    <td><input id="filtroCapacidade" name="filtroCapacidade" class="inputFiltro" type="number" form="frmFiltro"></td>
                    <td><input id="filtroCor" name="filtroCor" class="inputFiltro" type="text" form="frmFiltro"></td>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr>
                    <th class="row-actions" colspan="2">
                      <buttom id="btn-adicionar" class="btn btn-mini"><i class="icon-plus"></i> Adicionar</buttom>
                      <buttom id="btn-editar" class="btn btn-mini"><i class="icon-edit"></i> Editar</buttom>
                      <buttom id="btn-visualizar" class="btn btn-mini"><i class="icon-eye-open"></i> Visualizar</buttom>
                      <buttom id="btn-excluir" class="btn btn-mini"><i class="icon-remove"></i> Excluir</buttom>
                    </th>
                    <th colspan="3">
                      <?php
                        echo $this->Paginator->first("« ", array('url' => array('controller' => '#veiculos', 'action' => 'index')));
                        echo $this->Paginator->numbers(array('url' => array('controller' => '#veiculos', 'action' => 'index')));
                        echo $this->Paginator->last(" »", array('url' => array('controller' => '#veiculos', 'action' => 'index')));
                      ?>
                    </th>
                  </tr>
                </tfoot>
              </table>
              <div class="modal hide fade in" id="visualizarVeiculo">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Visualizar veículo</h3>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">Fechar</a>
                </div>
              </div>
            </div>
          </div>
          <script type="text/template" id="tplItemVeiculo">
            <td class="col-id"><%= model.get("id") %></td>
            <td class="col-pessoa_id"><%= model.get("pessoa_id") %></td>
            <td><%= model.get("descricao") %></td>
            <td><%= model.get("placa") %></td>
            <td><%= model.get("ano") %></td>
            <td><%= model.get("capacidade") %></td>
            <td><%= model.get("cor") %></td>
          </script>
          <script type="text/template" id="tplVisualizarVeiculo">
            <ul class="thumbnails">
              <li class="span5">
                <div class="thumbnail">
                  <img src="<%= model.get("fotografia")%>" alt="Fotografia do veículo">
                  <h5><%= model.get("descricao")%></h5>
                  <p>
                    Cor <%= model.get("cor")%>,
                    ano <%= model.get("ano")%>,
                    placa <%= model.get("placa")%>,
                    <%= model.get("capacidade")%> lugares (contando o motorista).
                  </p>
                </div>
              </li>
            </ul>
          </script>
          <script type="text/javascript">
            var dados = [
              <?php foreach ($veiculos as $veiculo): ?>
                {
                  id: <?php echo h($veiculo['Veiculo']['id']); ?>,
                  pessoa_id: <?php echo h($veiculo['Veiculo']['pessoa_id']); ?>,
                  descricao: "<?php echo h($veiculo['Veiculo']['descricao']); ?>",
                  placa: "<?php echo h($veiculo['Veiculo']['placa']); ?>",
                  ano: <?php echo h($veiculo['Veiculo']['ano']); ?>,
                  capacidade: <?php echo h($veiculo['Veiculo']['capacidade']); ?>,
                  cor: "<?php echo h($veiculo['Veiculo']['cor']); ?>",
                  fotografia: "<?php echo $this->request->here . 'visualizarFotografia/' . h($veiculo['Veiculo']['id']); ?>"
                },
              <?php endforeach; ?>
            ];

            $(document).ready(function() {
              var Item = Backbone.Model.extend({
                urlRoot: "veiculos"
              });
              //
              var Lista = Backbone.Collection.extend({
                model: Item
              });
              //
              var ItemVisualizacao = Backbone.View.extend({
                tagName: "tr",
                events: {
                  "click": "selecionarItem",
                },
                itemTemplate: _.template($("#tplItemVeiculo").html()),
                initialize: function() {
                  _.bindAll(this, "render", "unrender", "selecionarItem");
                  this.model.bind("change", this.render);
                  this.model.bind("remove", this.unrender);
                },
                render: function() {
                  $(this.el).attr("linha-selecionada", "false").html(this.itemTemplate({
                    model: this.model
                  }));
                  return this;
                },
                unrender: function(model, options) {
                  $(this.el).remove();
                },
                selecionarItem: function(e) {
                  if ($(this.el).hasClass("row-highlighting")) {
                    $(this.el).removeClass("row-highlighting").attr("linha-selecionada", "false");
                  } else {
                    $(this.el).closest("tbody").children("tr.row-highlighting").removeClass("row-highlighting").attr("linha-selecionada", "false");
                    $(this.el).addClass("row-highlighting").attr("linha-selecionada", "true");
                  }
                },
              });
              //
              var Visualizacao = Backbone.View.extend({
                events: {
                  "keypress .inputFiltro": "filtrar",
                  "click buttom#btn-adicionar": "adicionar",
                  "click buttom#btn-editar": "editar",
                  "click buttom#btn-visualizar": "visualizar",
                  "click buttom#btn-excluir": "excluir",
                },
                initialize: function() {
                  _.bindAll(this, "render", "adicionarItem", "adicionar", "editar", "visualizar", "excluir");
                  //
                  this.collection = new Lista(dados);
                  this.collection.bind("add", this.adicionarItem);
                  this.render();
                },
                render: function() {
                  $("form#frmFiltro").submit(this.enviarFiltro);
                  var self = this;
                  _(this.collection.models).each(function(item) {
                    self.adicionarItem(item);
                  }, this);
                },
                adicionarItem: function(item) {
                  var itemVisualizacao = new ItemVisualizacao({
                    model: item
                  });
                  $("tbody", this.el).append(itemVisualizacao.render().el);
                },
                removerItem: function(item) {
                  alert(item.get("nome") + " removido.");
                  item.destroy();
                },
                itemSelecionado: function() {
                  var selecao = $("tbody tr.row-highlighting", this.el);
                  if (selecao.length > 0) {
                    selecao = selecao[0];
                  } else {
                    selecao = null;
                  }
                  return selecao;
                },
                enviarFiltro: function(e) {
                  var filtros = '';
                  _(e.target.elements).each(function(el) {
                    console.log(el.name + "[" + el.type + "]: " + el.value);
                  });
                  return false;
                },
                filtrar: function(e) {
                  if (e.which == 13) {
                    $(e.target.form).submit();
                  }
                },
                adicionar: function(e) {
                  Backbone.history.navigate("veiculos/adicionar", {trigger: true, replace: false});
                  return false;
                },
                editar: function(e) {
                  var selecao = this.itemSelecionado();
                  if (selecao !== null) {
                    var id = $(selecao).children("td.col-id").text();
                    Backbone.history.navigate("veiculos/editar/" + id, {trigger: true, replace: false});
                  } else {
                    alert("Selecione um registro primeiro.");
                  }
                  return false;
                },
                visualizar: function(e) {
                  var selecao = this.itemSelecionado();
                  if (selecao !== null) {
                    var id = $(selecao).children("td.col-id").text();
                    var objItem = this.collection.get(id);
                    var templateVisualizar = _.template($("#tplVisualizarVeiculo").html());
                    $("#visualizarVeiculo .modal-body").html(templateVisualizar({
                      model: objItem
                    })).tooltip({
                      selector: "a[rel=tooltip]"
                    });
                    $("#visualizarVeiculo").modal("show");
                    $("#visualizarVeiculo .modal-body a[rel=tooltip]").click(function(e) {
                      e.preventDefault();
                    });
                  } else {
                    alert("Selecione um registro primeiro.");
                  }
                  return false;
                },
                excluir: function(e) {
                  var selecao = this.itemSelecionado();
                  if (selecao !== null) {
                    var id = $(selecao).children("td.col-id").text();
                    if (confirm("Deseja excluir o registro #" + id + "?")) {
                      var objItem = this.collection.get(id);
                      objItem.destroy({
                        wait: true,
                        url: objItem.urlRoot + "/excluir/" + id,
                        success: function(data, textStatus, jqXHR) {
                          $.pnotify({
                            pnotify_title: 'Exclusão de Veículo',
                            pnotify_text: textStatus.mensagem,
                            pnotify_type: 'info'
                          });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                          $.pnotify({
                            pnotify_title: 'Exclusão de Veículo',
                            pnotify_text: textStatus.responseText,
                            pnotify_type: 'error'
                          });
                        }
                      });
                    }
                  } else {
                    alert("Selecione um registro primeiro.");
                  }
                  return false;
                }
              });
              //
              var objVisualizacao = new Visualizacao({
                el: $("table#tbl-veiculos")
              });
            });
          </script>